import VueRouter from 'vue-router';
<template>
	<div class=" p-md w-5xl " v-if="nftInfo !== undefined">
		<div class=" b-px radius-md b-gray-300 w-12/12 p-md">
			<div
				class="h-lg row between-center"
				@click="clickCell1(nftInfo.owner)"
			>
				<Avatar
					class="bg-green-700"
					icon="ios-person"
					v-if="nftInfo.avatar.length == 0"
				/>
				<Avatar
					:src="nftInfo.avatar"
					v-if="nftInfo.avatar.length != 0"
				/>
				{{ nftInfo.owner.slice(1, 5) }}....{{ nftInfo.owner.slice(38) }}
				<Icon type="ios-more-outline" />
			</div>
			<div
				class="my-md h-4xl w-4xl mx-auto"
				@click="clickCell2(nftInfo.id)"
			>
				<img
					src="../imgs/unnamed.gif"
					alt="图片展示"
					class="w-12/12 h-12/12 object-contain"
					srcset=""
					v-if="
						nftInfo.uri.length == 0 ||
							nftInfo.uri == 'http://baidu3.com'
					"
				/>
				<img
					class="w-12/12 h-12/12 object-contain"
					v-lazy="nftUriBasePath + nftInfo.uri"
					v-if="
						nftInfo.uri.length != 0 &&
							nftInfo.uri !== 'http://baidu3.com'
					"
				/>
			</div>
			<div class="bottom">
				<h3>{{ nftInfo.name }}</h3>
				<b> {{ forSale(nftInfo.forSale) }}</b>
				<b> 1of1</b><br />
				<div class="felx sb">
					<b> {{ nftInfo.price }} haic</b>
					<Icon type="ios-heart-outline float-right" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { OSSBASEPATH } from '@/config';
export default {
	props: ['nftInfo'],
	data() {
		return {
			nftUriBasePath: OSSBASEPATH,
		};
	},
	methods: {
		clickCell2(nftId) {
			// this.$router.push('/detail');
			this.$router.push({
				path: '/detail',
				query: {
					nftId,
				},
			});
		},
		clickCell1(userAddress) {
			// this.$router.push('/detail');
			this.$router.push({
				path: '/personalhome',
				query: {
					userAddress,
				},
			});
		},
		forSale(forSale) {
			if (forSale == 1) {
				return '出售中';
			} else {
				return '非卖品';
			}
		},
	},
};
</script>
